<template>
  <div class="app-container" :style="{}">
    <div id="container"></div>
    <div class="info">
      <span v-text="message"></span>
    </div>
    <div class="input-item">
      <h5>点击地图获取门店坐标</h5>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    searchAddress: ''
  },
  data() {
    return {
      //实时屏幕高度
      windowHeight: document.documentElement.clientHeight,
      map: null,
      message: '请用鼠标在地图上操作试试',
      //把选中的经纬度回传给父组件
      position: null
    }
  },
  mounted() {
    // 当浏览器被重置大小时执行
    window.onresize = () => {
      return (() => {
        this.windowHeight = document.documentElement.clientHeight;
      })()
    };
    //调用地图初始化方法
    this.initAMap()
  },
  methods: {
    initAMap() {
      this.map = new AMap.Map("container", {
        zoom: 11,
      });
      this.map.on('click', this.showInfoClick);
    },

    showInfoClick(e) {
      this.map.clearMap();
      this.message = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！'
      console.log(e.lnglat.getLng(), e.lnglat.getLat())
      const marker = new AMap.Marker({
        position: [e.lnglat.getLng(), e.lnglat.getLat()],
        map: this.map
      });
      console.log("marker", marker)
      this.positon = e.lnglat.getLng() + ',' + e.lnglat.getLat()
      console.log("坐标", this.positon)
    },

    showInfoDbClick(e) {
      this.message = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置双击了地图！'
    },

    showInfoMove() {
      this.message = '您移动了您的鼠标！'
    }
  }
}
</script>

<style scoped>
#app-container {
  width: 100%;
  position: relative
}

#container {
  width: 100%;
  height: 100%;
}

.info {
  position: absolute;
  background: white;
  padding: 10px;
  right: 30px;
  top: 30px;
}

.input-item {
  position: absolute;
  background: white;
  padding: 10px 20px;
  right: 30px;
  bottom: 30px;
}

</style>
